<template>
    <!--测井记录选择器-->
    <el-card>
        <template #header>
            <div class="card-header" style="display: flex; justify-content: center;">
                <el-button class="button" @click="getView('左视图')" text>主视图</el-button>
                <el-button class="button" @click="getView('右视图')" text>左视图</el-button>
                <el-button class="button" @click="getView('俯视图')" text>俯视图</el-button>
                <el-button class="button" @click="getView('三维图')" text>三维图</el-button>
            </div>
        </template>
        <div>
            <div ref="chartContainer" style="width: 100%; height: 68vh;"></div>
        </div>
    </el-card>
</template>
<script setup>
import { getInterpolation } from '@/api/survey/survey.js'
import * as echarts from 'echarts';
import 'echarts-gl';
const queryParams = ref({
    pageSize: 1000000,
    pageNum: 1,
    id:undefined,
    space:undefined
})
const chartContainer = ref(null);
const props = defineProps({
    data:Object
})
onMounted(() => {
    queryParams.value.id = props.data.id
    queryParams.value.space = 1.0
    getInterpolation(queryParams.value).then(res=>{
        renderChart(res.content);
    })
    
})

const renderChart = (dataRows, type) => {
    const data = [];
    let dataCasingOne = [];
    let dataCasingTwo = [];
    let dataCasingThree = [];

    dataRows.forEach(element => {
        const x = element.X;
        const y = element.Y;
        const z = -element.Z;
        data.push([x, y, z]);
    });

    dataCasingOne = data.filter(e => e[2] > -160);
    dataCasingTwo = data.filter(e => e[2] > -800);
    dataCasingThree = data.filter(e => e[2] > -1300);

    const chart = echarts.init(chartContainer.value);

    const option = {
        tooltip: {},
        backgroundColor: '#fff',
        visualMap: {
            show: false,
            dimension: 5,
            inRange: {},
        },
        xAxis3D: {
            type: 'value',
        },
        yAxis3D: {
            type: 'value',
        },
        zAxis3D: {
            type: 'value'
        },
        grid3D: {
            viewControl: {
                projection: 'orthographic',
            },
        },
        series: [
            {
                type: 'line3D',
                data: data,
                name: "井眼轨迹",
                lineStyle: {
                    width: 8,
                    color: '#000000',
                },
            },
            {
                type: 'line3D',
                data: dataCasingOne,
                name: "一开套管",
                lineStyle: {
                    width: 48,
                    opacity: 0.3,
                    color: '#00ff'
                },
            },
            {
                type: 'line3D',
                data: dataCasingTwo,
                name: "二开套管",
                lineStyle: {
                    width: 37,
                    opacity: 0.3,
                    color: '#FF0FFF'  // 设置为绿色
                },
            },
            {
                type: 'line3D',
                data: dataCasingThree,
                name: "三开套管",
                lineStyle: {
                    width: 24,
                    opacity: 0.3,
                    color: '#008000'  // 设置为绿色
                },
            },
        ]
    };
    //右视图
    const optionRight = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            showContent: false,
        },
        xAxis: { type: "value", inverse: true },
        yAxis: { type: "value" },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                type: 'slider',
                start: 0,
                end: 100
            }
        ],
        series: [
            {
                type: 'line',
                data: data,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 1,
                    color: '#000000',
                    width: 8,
                },
            },
            {
                type: 'line',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#00ff',
                    width: 48,
                },
            },
            {
                type: 'line',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#FF0FFF',
                    width: 37,
                },
            },
            {
                type: 'line',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 1,
                    y: 2,
                    tooltip: [1, 2]
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#008000',
                    width: 24,
                },
            },
        ]
    };
    //顶视图
    const optionTop = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            showContent: false,
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                type: 'slider',
                start: 0,
                end: 100
            }
        ],
        xAxis: { type: "value", name: "x" },
        yAxis: { type: "value", name: "Y" },
        series: [
            {
                type: 'line',
                data: data,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 1,
                    color: '#000000',
                    width: 8,
                },
            },
            {
                type: 'line',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#00ff',
                    width: 48,
                },
            },
            {
                type: 'line',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#FF0FFF',
                    width: 37,
                },
            },
            {
                type: 'line',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 1,
                    tooltip: [0, 1]
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#008000',
                    width: 24,
                },
            },
        ]
    };
    //左视图
    const optionLeft = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            showContent: false,
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                type: 'slider',
                start: 0,
                end: 100
            }
        ],
        xAxis: { type: "value", name: "X" },
        yAxis: { type: "value", name: "Y" },
        series: [
            {
                type: 'line',
                data: data,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                symbolSize: 0.0000001,
                encode: {
                    x: 0,
                    y: 2,

                },
                lineStyle: {
                    opacity: 1,
                    color: '#000000',
                    width: 8,
                },
            },
            {
                type: 'line',
                data: dataCasingOne,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 2,
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#00ff',
                    width: 48,
                },
            },
            {
                type: 'line',
                data: dataCasingTwo,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 2,
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#FF0FFF',
                    width: 37,
                },
            },
            {
                type: 'line',
                data: dataCasingThree,
                // 变得圆滑
                smooth: true,
                // 隐藏折点
                showSymbol: false,
                encode: {
                    x: 0,
                    y: 2,
                },
                lineStyle: {
                    opacity: 0.3,
                    color: '#008000',
                    width: 24,
                },
            },
        ]
    };

    if (type == null || type === "三维图") {
        chart.clear()
        chart.setOption(option);
    } else if (type === "左视图") {
        chart.clear()
        chart.setOption(optionLeft);
    } else if (type === "右视图") {
        chart.clear()
        chart.setOption(optionRight);
    } else if (type === "俯视图") {
        chart.clear()
        chart.setOption(optionTop);
    }


}
function getView(type) {
    renderChart(holeData, type);
}

</script>
  
<style>
/* 样式可以根据需要自行调整 */
</style>
  